Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

367
Visualizações
Axios is not loading List Content in Unit Test => Empty Array

I have this list in my frontend

<ul>
  <li v-for="department in departments" :key="department.DepartmentId" data-test="department">
        {{ department.DepartmentName }}
  </li>
</ul>

and this action

methods: {
        async refreshData() {
            axios.get("http://localhost:49146/api/department").then((response) => {
                this.departments = response.data
            }).catch( error => console.log( 'error: ' + error ) );
        },

and this Unit Test

import axios from 'axios';
import DepartmentForm from '../../src/components/DepartmentForm.vue'
import { mount, flushPromises } from '@vue/test-utils'

const mockList = [
    { DepartmentId: 1, DepartmentName: 'Support'},
    { DepartmentId: 2, DepartmentName: 'IT'}
]

// Following lines tell Jest to mock any call to `axios.get`and to return `mockPostList` instead
jest.spyOn(axios, 'get').mockResolvedValue(mockList)

describe('DepartmentForm.vue', () => {
    const wrapper = mount(DepartmentForm)

    it('Does a wrapper exist', () => {
        expect(wrapper.exists()).toBe(true)
    })

    it('Has a department table', () => {
        expect(wrapper.find('table').exists()).toBe(true)
    })

    it('Refreshes departments on mount', async () => {
        // Let's assert that we've called axios.get the right amount of times and
        // with the right parameters.
        expect(axios.get).toHaveBeenCalledTimes(1)
        expect(axios.get).toHaveBeenCalledWith('http://localhost:49146/api/department')

        // Wait until the DOM updates.
        await flushPromises()

        // Finally, we make sure we've rendered the content from the API.
        const departments = (wrapper.findAll('[data-test="department"]'))        

        expect(departments).toHaveLength(2)
        expect(departments[0].text()).toContain('Support')
        expect(departments[1].text()).toContain('IT')
    })
})    

On my localhost everything is working. But my UnitTest is faulty, because apparently the departments list is empty.

Unit Test Fail

How can I fix this issue?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda